<template>
	<view class="probcard">
		<view class="col">
			<view class="title text-overflow">
				<u-text :lines="2" :text="prob.title" color="#000" size="16" :bold="true"></u-text>
			</view>
			<view class="content-text">
				<u-text :lines="3" :text="prob.content" color="#999999" size="14"></u-text>
			</view>
			<view class="user flex-start">
				<view class="headimg">
					<img class="logo" src="" />
				</view>
				<view class="name">
					{{prob.name}}<i>·</i> 提问
				</view>
			</view>
			<view class="interaction hor-center space-between">
				<view>
					<span class="num">{{prob.num}}</span>个回答
				</view>
				<view class="act space-between">
					<view class="hor-center">
						<u-icon name="man-add" size="24" color="#7ebaa7"></u-icon>
						<span>关注回答</span>
					</view>
					<view class="hor-center">
						<u-icon name="share" size="24" color="#7ebaa7"></u-icon>
						<span>分享给朋友</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "prob-card",
		data() {
			return {

			};
		},
		props: {
			prob: Object
		}
	}
</script>

<style lang="scss" scoped>
	.probcard {
		padding: 2vh 4vw 0 4vw;
		border-radius: 2vw;
		background-color: #fff;
	}

	.title {
		font-weight: 700;
	}

	.user {
		height: 4vh;
		align-items: center;
		margin: 2vw 0;
		color: #878787;
	}

	.headimg {
		width: 24px;
		height: 24px;
		background-color: #61c2b7;
		border-radius: 50%;
		margin-right: 2vw;
	}

	.name {
		font-size: 14px;
		color: #878787;
	}

	.name i {
		font-style: normal;
		margin: 0 1vw;
	}

	.content-text {
		margin: 1vh 0;
	}

	.interaction {
		width: 100%;
		margin-top: 1vh;
		font-size: 13px;
		font-weight: 700;
		color: #888;
		white-space: nowrap;
		background-color: #fbfcfe;
		padding: 0.2rem 0;
	}

	.interaction span {
		margin-left: 0.2rem;
	}

	.num {
		font-weight: normal;
		color: #000;
		margin-right: 1vw;
	}

	.act {
		width: 55%;
		justify-content: space-between;
		color: #7ebaa7;
	}
</style>
